<template>
  <view>
		<!-- 人脸检测 -->
		<h2>人脸检测</h2>
		<view class="uploadBox">
			<view style="width: 70%;">
				<view @click="changImg()">
					<view v-if="!src" class="uploadItem"></view>
					<image v-if="src" class="imgUrl" :src="src" mode="widthFix"/>
				</view>
				<view @click="getFace()" class="leftBtn">上传照片人脸检测</view>
			</view>
		</view>

		<!-- 身份证识别 -->
		<h2>身份证识别</h2>
		<view class="uploadBox_card">
			<view style="width: 70%;margin-bottom: 10px" @click="uploadIdcard(1)">
				<view v-if="!idCarSrc1" class="uploadItem">
					<view class="imgBox">
						<view class="tit">身份证正面</view>
						<view class="leftTop"></view>
						<view class="leftTop2"></view>
						<view class="leftbottom"></view>
						<view class="leftbottom2"></view>
						<view class="rightTop"></view>
						<view class="rightTop2"></view>
						<view class="rightbottom"></view>
						<view class="rightbottom2"></view>
					</view>
				</view>
				<image v-if="idCarSrc1" class="imgUrl" :src="idCarSrc1" mode="widthFix"/>
			</view>
			<view style="width: 70%;" @click="uploadIdcard(2)">
				<view v-if="!idCarSrc2" class="uploadItem">
					<view class="imgBox">
						<view class="tit">身份证反面</view>
						<view class="leftTop"></view>
						<view class="leftTop2"></view>
						<view class="leftbottom"></view>
						<view class="leftbottom2"></view>
						<view class="rightTop"></view>
						<view class="rightTop2"></view>
						<view class="rightbottom"></view>
						<view class="rightbottom2"></view>
					</view>
				</view>
				<image v-if="idCarSrc2" class="imgUrl" :src="idCarSrc2" mode="widthFix"/>
			</view>
			<view @click="identityCard()" class="leftBtn">身份证检测</view>
		</view>

		<!-- 上传人脸图片到服务端进行活体检测 -->
		<h2>上传人脸活体检测</h2>
		<view class="uploadBox">
			<view style="width: 70%;">
				<view @click="changImgh()">
					<view v-if="!srch" class="uploadItem"></view>
					<image v-if="srch" class="imgUrl" :src="srch" mode="widthFix"/>
				</view>
				<view @click="getFaceh()" class="leftBtn">上传照片人脸检测</view>
			</view>
		</view>

		<!-- 人脸对比 -->
		<h2>人脸对比</h2>
		<view class="uploadBox_card">
			<view style="width: 70%;margin-bottom: 10px" @click="uploadIdcardd(1)">
				<view v-if="!idCarSrc1d" class="uploadItem">
					<view class="imgBox">人脸对比1</view>
				</view>
				<image v-if="idCarSrc1d" class="imgUrl" :src="idCarSrc1d" mode="widthFix"/>
			</view>
			<view style="width: 70%;" @click="uploadIdcardd(2)">
				<view v-if="!idCarSrc2d" class="uploadItem">
					<view class="imgBox">人脸对比2</view>
				</view>
				<image v-if="idCarSrc2d" class="imgUrl" :src="idCarSrc2d" mode="widthFix"/>
			</view>
			<view @click="identityCardd()" class="leftBtn">人脸对比</view>
		</view>
  
		<!-- 视频人脸检测 -->
		<h2>视频人脸检测</h2>
		<view class="uploadBox">
			<view style="width: 70%;">
				<view v-if="videoPath">
					<video
						id="myVideo"
						:src="videoPath"
						@error="videoErrorCallback"
						enable-danmu
						danmu-btn
						controls
					></video>
				</view>
				<button type="primary" @click="saveVideo">录制视频检测</button>
			</view>
		</view>
		
		<!-- 人脸检测 -->
		<h2>人脸搜索与库管理</h2>
		<view class="uploadBox">
			<view style="width: 70%;">
				<view @click="changImgArea()">
					<view v-if="!srcArea" class="uploadItem"></view>
					<image v-if="srcArea" class="imgUrl" :src="srcArea" mode="widthFix"/>
				</view>
				<view @click="getFaceArea()" class="leftBtn">人脸搜索与库管理</view>
			</view>
		</view>
  </view>
</template>

<script>
import OCR from '../../js_sdk/leiqch-baiduOCR/BaiDu-OCR/BaiDu-OCR'
	export default {
		data() {
			return {
				src: "",
				imgData: '',
				idCarSrc1: "", // 身份证正面
				idCarSrc2: "", // 身份证反面
				idCard_img_z: '', // 身份证正面
				idCard_img_f: '', // 身份证反面
				cardNum: 0, // 身份证正1反2面
				srch: "",
				imgDatah: [],
				idCarSrc1d: "", // 照片1
				idCarSrc2d: "", // 照片2
				idCard_img_zd: '', // 照片1
				idCard_img_fd: '', // 照片2
				cardNumd: 0,
				videoPath: '', // 视频地址
				videoBase: '', // 视频地址base64
				srcArea: '', // 展示图片
				imgDataArea: '' // base64
			}
		},
		methods: {
			async getFace() {
				var result = await OCR.ocr({func:'detect',max_face_num:1,face_field:'quality',b64:this.imgData})
				console.log(result)
			},
			changImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ["camera", "album"], //拍照或相册
					success: (res) => {
						// console.log(res);
						this.src = res.tempFilePaths[0]
						res.tempFiles.forEach((item, index) => {
							this.urlTobase64(res.tempFilePaths[index], item, 1);
						});
					}
				})
			},
			urlTobase64(url, item, num) {
				// num===1 人脸检测 num===2 身份证识别
				const self = this
				var itemname = item.name.split(".")[0];
				var itemtype = item.name.split(".")[1];
				var base64 = "";
				uni.request({
					url: url,
			 		method: "GET",
					responseType: "arraybuffer",
					success: (res) => {
						base64 = uni.arrayBufferToBase64(res.data); // 把arraybuffer转成base64
						var img = {
							name: itemname,
							size: item.size,
							type: itemtype,
							content: base64,
							url: url,
							new: true,
							state: -1,
						}
						if (num === 1) {
							this.imgData = img.content
						}
						if (num === 2) {
							if (this.cardNum === 1) {
								this.idCard_img_z = img.content
								this.cardNum = 0
							} else if (this.cardNum === 2) {
								this.idCard_img_f = img.content
								this.cardNum = 0
							}
						}
						if (num === 3) {
							this.imgDatah.push(img.content)
						}
						if (num === 4) {
							if (this.cardNumd === 1) {
								this.idCard_img_zd = img.content
								this.cardNumd = 0
							} else if (this.cardNumd === 2) {
								this.idCard_img_fd = img.content
								this.cardNumd = 0
							}
						}
						if (num === 5) {
							this.imgDataArea = img.content
						}
					},
				});
			},
			// 身份证检测
			uploadIdcard(num) {
				// num=1 正面 num=2 反面
				this.cardNum = num
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ["camera", "album"], //拍照或相册
					success: (res) => {
						if (num === 1) {
							this.idCarSrc1 = res.tempFilePaths[0]
						} else if (num === 2) {
							this.idCarSrc2 = res.tempFilePaths[0]
						}
						res.tempFiles.forEach((item, index) => {
							this.urlTobase64(res.tempFilePaths[index], item, 2);
						});
					}
				})
			},
			async identityCard() {
				var result1 = await OCR.ocr({func:'idcard',side:'front',b64:this.idCard_img_z})
				var result2 = await OCR.ocr({func:'idcard',side:'back',b64:this.idCard_img_f})
				console.log(result1)
				console.log(result2)
			},
			// 上传人脸图片到服务端进行活体检测------------------------------------------------------------------------------
			async getFaceh() {
				var result = await OCR.ocr({func:'faceverify',images:this.imgDatah})
				console.log(result)
			},
			changImgh() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ["camera", "album"], //拍照或相册
					success: (res) => {
						// console.log(res);
						this.srch = res.tempFilePaths[0]
						res.tempFiles.forEach((item, index) => {
							this.urlTobase64(res.tempFilePaths[index], item, 3);
						});
					}
				})
			},
			// 人脸对比-------------------------------------------------------------------------------
			uploadIdcardd(num) {
				this.cardNumd = num
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ["camera", "album"], //拍照或相册
					success: (res) => {
						if (num === 1) {
							this.idCarSrc1d = res.tempFilePaths[0]
						} else if (num === 2) {
							this.idCarSrc2d = res.tempFilePaths[0]
						}
						res.tempFiles.forEach((item, index) => {
							this.urlTobase64(res.tempFilePaths[index], item, 4);
						});
					}
				})
			},
			async identityCardd() {
				var result1d = await OCR.ocr(
					{
						func:'match',
						Live_Image:this.idCard_img_zd,
						IDCard_Image: this.idCard_img_fd
					}
				)
				console.log(result1d)
			},
			// 视频人脸检测-------------------------------------------------------------------------
			videoErrorCallback: function() {
				uni.showModal({
					content: '视频加载失败',
					showCancel: false
				});
			},
			async faceliveness () {
				var result = await OCR.ocr({func:'faceliveness',b64:this.videoBase})
				console.log(result)
			},
			async sessioncode () {
				var resultCode = await OCR.ocr({func:'sessioncode'})
				// console.log(resultCode)
				var result = await OCR.ocr({func:'faceliveness',b64:this.videoBase,sessionId: resultCode.result.session_id})
				console.log(result)
			},
			async saveVideo() {
				const self = this
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera'],
					success: res => {
						// console.log(res)
						this.videoPath = res.tempFilePath;
						// base64
						var file = res.tempFile
						var fr = new FileReader()
						fr.onloadend = function(e) {
							self.videoBase = e.target.result.replace(/^data:video\/\w+;base64,/, "")
							self.sessioncode()
							// self.faceliveness()
						}
						fr.readAsDataURL(file)
						// h.264编码
						//创建文件
						// var file = new File([res.tempFilePath], '文件名.mp4',{type: 'video/mp4;codecs=h264;acodec=aac'});
						// let reader = new FileReader();
						// //转base64
						// reader.readAsDataURL(file);
						// reader.onload= function(e) {
						// 	 var videoBase64 = e.target.result;
						// 	 if (videoBase64) {
						// 		//将base64头部替换掉
						// 		self.videoBase = videoBase64.replace("data:video/mp4;codecs=h264;acodec=aac;base64,","");
						// 		// self.faceliveness()
						// 		self.sessioncode()
						// 	}
						// }
					},
					fail: (err) => {
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.camera'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机获取视频，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
					}
				});
			},
			// 保存视频到本地相册中h5不支持saveVideoToPhotosAlbum事件
			getTempFilePath(url) {
				uni.showLoading({
					title: '保存中...'
				});
				// 如果已经下载本地路径，那么直接储存
				let obj = {
					filePath: url,
					success: () => {
						uni.showModal({
							content: '保存成功',
							showCancel: false
						});
						uni.hideLoading();
					},
					fail: e => {
						uni.hideLoading();
						uni.showModal({
							content: '保存失败',
							showCancel: false
						});
					}
				};
				uni.saveVideoToPhotosAlbum(obj)
			},
			// 人脸搜索与库管理-----------------------------------------------------------------------------
			changImgArea() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ["camera", "album"], //拍照或相册
					success: (res) => {
						this.srcArea = res.tempFilePaths[0]
						res.tempFiles.forEach((item, index) => {
							this.urlTobase64(res.tempFilePaths[index], item, 5);
						});
					}
				})
			},
			async getFaceArea() {
				var result = await OCR.ocr({func:'search',b64:this.imgDataArea})
				console.log(result)
			}
		}
	}
</script>

<style lang="scss" scoped>
.uploadBox {
	padding: 15rpx 20rpx 40rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
	.uploadItem {
		width: 100%;
		height: 320rpx;
		background-color: #f1f7ff;
		border-radius: 15rpx;
		padding: 30rpx;
		position: relative;
	}
	.imgUrl {
		width: 100%;
		height: 320rpx;
	}
	.leftBtn {
		width: 100%;
		height: 75rpx;
		line-height: 75rpx;
		background-color: #007aec;
		border-radius: 0 0 12rpx 12rpx;
		text-align: center;
		color: #fff;
	}
}
.uploadBox_card {
	padding: 15rpx 20rpx 40rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	.uploadItem {
		width: 100%;
		height: 320rpx;
		background-color: #f1f7ff;
		border-radius: 15rpx;
		padding: 30rpx;
		position: relative;
	}
	.imgUrl {
		width: 100%;
		height: 320rpx;
	}
	.leftBtn {
		width: 70%;
		height: 75rpx;
		line-height: 75rpx;
		background-color: #007aec;
		border-radius: 0 0 12rpx 12rpx;
		text-align: center;
		color: #fff;
	}
	.imgBox {
		width: 100%;
		height: 100%;
		position: relative;
		.tit {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		.leftTop {
			height: 28rpx;
			width: 4rpx;
			background-color: #007aec;
			position: absolute;
			left: 0;
		}

		.leftTop2 {
			height: 4rpx;
			width: 28rpx;
			background-color: #007aec;
			position: absolute;
			top: 0;
		}

		.leftbottom {
			height: 28rpx;
			width: 4rpx;
			background-color: #007aec;
			position: absolute;
			bottom: 0;
		}

		.leftbottom2 {
			height: 4rpx;
			width: 28rpx;
			background-color: #007aec;
			position: absolute;
			bottom: 0;
		}

		.rightTop {
			height: 28rpx;
			width: 4rpx;
			background-color: #007aec;
			position: absolute;
			right: 0;
		}

		.rightTop2 {
			height: 4rpx;
			width: 28rpx;
			background-color: #007aec;
			position: absolute;
			right: 0;
			top: 0;
		}

		.rightbottom {
			height: 28rpx;
			width: 4rpx;
			background-color: #007aec;
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.rightbottom2 {
			height: 4rpx;
			width: 28rpx;
			background-color: #007aec;
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}
}
#myVideo {
	width: 100%;
}
</style>
